<template>
	<view class="personal">
		<view style="background-color: #fff;">
			<uv-notice-bar bgColor="#FFE8DB" color="#A65D35" text="昵称只能修改一次，若多次修改请前往背包使用改名卡"></uv-notice-bar>
			<uv-form labelPosition="left" :model="form" ref="formRef">
				<uv-form-item label="头像" label-width="150rpx">
					<view class="ipt-box" @click="selectPhoto">
						<image class="img" :src="replaceUrl(form.photo)"></image>
						<uv-icon name="arrow-right" color="#999999" size="16"></uv-icon>
					</view>
				</uv-form-item>
				<uv-form-item label="昵称" label-width="150rpx">
					<view class="ipt-box">
						<view v-if="form.isEditNickName * 1 !== 0" @click="$uv.toast('请使用改名卡修改')">
							{{ form.nickName }}
						</view>
						<uv-input v-else inputAlign="right" placeholder="请输入昵称" border="none" v-model="form.nickName"
							clearable></uv-input>
					</view>
				</uv-form-item>
				<uv-form-item label="登陆账号" label-width="150rpx">
					<view class="ipt-box">
						{{ form.phone ? phoneNumberMask(form.phone) : "" }}
					</view>
				</uv-form-item>
				<uv-form-item label="用户ID" label-width="150rpx">
					<view class="ipt-box">
						{{ form.code }}
					</view>
				</uv-form-item>
				<uv-form-item label="个性签名" label-width="150rpx">
					<view class="ipt-box">
						<uv-input inputAlign="right" placeholder="请输入个性签名" border="none" v-model="form.signature"
							clearable></uv-input>
					</view>
				</uv-form-item>
				<uv-form-item label="实名认证" label-width="150rpx">
					<view class="ipt-box" @click="goRealName">
						<view style="margin-right: 20rpx;">{{ form.isCertificate * 1 === 1 ? "已认证" : "未认证" }}</view>
						<uv-icon name="arrow-right" color="#999999" size="16"></uv-icon>
					</view>
				</uv-form-item>
				<uv-form-item label="QQ" label-width="150rpx">
					<view class="ipt-box">
						<uv-input type="number" inputAlign="right" placeholder="请输入QQ号码" border="none" v-model="form.qqNo" clearable
							@blur="handleBlur"></uv-input>
					</view>
				</uv-form-item>
				<uv-form-item label="能力标签" label-width="150rpx">
					<view class="ipt-box" @click="navigateTo(`/pages_mine/ability_tag/index`)">
						<uv-icon name="arrow-right" color="#999999" size="16"></uv-icon>
					</view>
				</uv-form-item>
			</uv-form>
		</view>
		<view class="btn" @click="submit">保存</view>
	</view>
	<uv-action-sheet ref="actionSheetRef" cancelText="取消" :actions="actionSheetList" @select="actionSheetSelect"
		:round="10">
	</uv-action-sheet>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		GetPersonalData,
		UpdatePersonalData
	} from '@/api/modules/mine';
	import {
		checkStr,
		replaceUrl
	} from '@/utils/index.js'
	import useStore from '@/stores';
	import {
		phoneNumberMask,
		chooseImage
	} from '@/utils';

	const {
		globalStore
	} = useStore()

	onShow(() => {
		getPersonalData()
	})

	const form = reactive({
		nickName: "",
		photo: "",
		phone: "",
		signature: "",
		qqNo: "",
		code: "",
		isCertificate: 0, //	0：未认证，1：已认证
		isEditNickName: 0 //	0:可修改 1，不可修改
	})

	function getPersonalData() {
		GetPersonalData().then(res => {
			Object.assign(form, res.data)

		})
	}

	const actionSheetList = [{
			name: '相册',
			type: "album"
		},
		{
			name: '拍照',
			type: "camera"
		}
	]
	const actionSheetRef = ref()

	function selectPhoto() {
		actionSheetRef.value.open()
	}

	function actionSheetSelect(e) {
		chooseImage(1, e.type, 1).then(res => {
			form.photo = res
		})
	}
	const handleBlur = () => {
		if (!checkStr(form.qqNo, 'QQ')) {
			uni.$uv.toast('请输入正确QQ号');
			form.qqNo = ''
		}
	}

	function submit() {
		if (!form.photo) {
			uni.$uv.toast('头像不能为空');
			return
		}
		if (!form.nickName) {
			uni.$uv.toast('昵称不能为空');
			return
		}
		if (form.nickName.length > 15) {
			uni.$uv.toast('昵称长度不得大于15个字符');
			return
		}

		uni.$showModal({
			title: "",
			content: "是否确定保存资料？",
			confirmVal: '确定',
			cancelVal: '取消'
		}).then(() => {
			UpdatePersonalData({
				nickName: form.nickName,
				photo: form.photo,
				signature: form.signature,
				qqNo: form.qqNo,
				id: globalStore.userInfo.id
			}).then(res => {
				globalStore.setUserInfo({
					...globalStore.userInfo,
					nickName: res.data.nickName,
					photo: res.data.photo,
					phone: res.data.phone,
					signature: res.data.signature,
					qqNo: res.data.qqNo,
					code: res.data.code,
					isCertificate: res.data.isCertificate, //	0：未认证，1：已认证
					isEditNickName: res.data.isEditNickName //	0:可修改 1，不可修改
				})
				uni.$uv.toast('保存成功');
				setTimeout(() => {
					getPersonalData()
				}, 1000)
			})
		})
	}

	function navigateTo(url) {
		uni.navigateTo({
			url
		})
	}
	const goRealName = () => {
		if (form.isCertificate === 0) {
			uni.navigateTo({
				url: '/pages/system/certification'
			})
		} else {
			uni.navigateTo({
				url: '/pages/system/switchCertification'
			})
		}
	}
</script>

<style scoped lang="scss">
	.personal {
		width: 100%;
		height: 100vh;
		display: flex;
		background: #F7F8FB;
		flex-direction: column;

		:deep(.uv-form) {
			// margin: 0 0 0 40rpx;

			.uv-form-item__body {
				// padding: 15rpx 0 !important;
				border-bottom: 1px solid #EBEBEB;
				padding: 15rpx 40rpx !important;
			}

			.ipt-box {
				height: 88rpx;
				border-radius: 16rpx;
				width: calc(100% - 60rpx);
				display: flex;
				font-weight: 400;
				align-items: center;
				justify-content: flex-end;
				padding-left: 30rpx;
				color: rgba(102, 102, 102, 1);

				.img {
					height: 80rpx;
					width: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
		}

		.btn {
			width: 690rpx;
			// min-height: 96rpx;
			// border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #fff;
			margin: 92rpx auto;
			// background: linear-gradient(270deg, #A7A1F6 0%, #6E68E9 100%);
			min-height: 80rpx;
			background: #6E68E9;
			border-radius: 200rpx;
		}
	}
</style>